/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header title="支付成功">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="mian">
      <div class="img_box">
        <img :src="require('../../assets/img/pay_success.png')" alt>
      </div>
      <h2>支付成功</h2>
      <div class="btn_box">
        <a href="javascript:void(0);" class="btn" @click="goBack()">确定</a>
      </div>
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
import { reqOrderDetail } from "../../api/index.js";

export default {
  data() {
    return {
      status: "success", //支付成功还是支付失败
      orderId: "", //订单编号
      reqstatus: "" //后台请求的支付状态, 0: 待支付, -1: 已作废, 1: 已支付
    };
  },
  mounted() {
    let query = this.$router.history.current.query;
    this.status = query.status;
    this.orderId = query.orderId;
    this.initData();
  },
  methods: {
    async initData() {
      let result = await reqOrderDetail({ orderId: this.orderId });
      if (result.code === 1) {
        this.data = result.data;
        this.reqstatus = result.data.status;
      } else {
        this.$vux.toast.show(`获取订单信息失败:${resul.msg}`);
      }
    },
    goBack() {
      this.$router.push({ path: "/taochangDetail", query: {cid: this.data.relId} });
    }
  },
  components: {
    Header
  }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";
.content {
  .be-full();
  .main {
    width: 100%;
    height: calc(~"100% - 46px");
  }
}

h2 {
  text-align: center;
  font-size: 20px;
  color: @font-primary;
  margin: 10px 0;
}

.img_box {
  width: 100%;
  height: 300px;
  .mix-flex-center();
  img {
    width: 250px;
    height: 250px;
  }
}

.btn_box{
  .mix-flex-center;
  .btn{
    width: 70%;
    background: @red;
    color: @white;
    font-size: 18px;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: center;
  }
}
</style>
